<template>
    <div>
      <div>
        <el-breadcrumb separator-class="el-icon-arrow-right">
          <el-breadcrumb-item :to="{ path: '/index' }">首页</el-breadcrumb-item>
          <el-breadcrumb-item>系统中心</el-breadcrumb-item>
          <el-breadcrumb-item>原材料管理</el-breadcrumb-item>
        </el-breadcrumb>
        <el-card class="box-card">
          <el-form :model="material"  ref="ruleForm" label-width="100px" class="demo-ruleForm">
            <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item label="编号" prop="name">
                  <el-input v-model="material.code" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
            <el-col :span="10">
              <el-form-item label="原材料名称" prop="name">
                <el-input v-model="material.name" disabled></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="10">
              <el-form-item label="单价" prop="price">
                <el-input v-model="material.price" disabled></el-input>
              </el-form-item>
            </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item label="化学元素名称" prop="chemical" >
                  <el-input v-model="material.chemical" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="密度(g/cm³)" prop="density">
                  <el-input v-model="material.density" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row :gutter="20">
              <el-col :span="10">
                <el-form-item label="硬度" prop="hardness" >
                  <el-input v-model="material.hardness" disabled></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="10">
                <el-form-item label="材料介绍" prop="remarks">
                  <el-input v-model="material.remarks" disabled></el-input>
                </el-form-item>
              </el-col>
            </el-row>
          </el-form>
        </el-card>
      </div>
    </div>
</template>

<script>
  export default {
    name: 'LookMaterial',
    data () {
      return {
        material: {
          name: '',
          price: '',
          chemical: '',
          density: '',
          remarks: '',
          hardness: ''
        },
      }
    },
    methods:{
      back:function () {
          this.$router.push('/materialMenu')
      },
      lookMaterial:function (id) {
        this.$http.get('/material/get/'+id).then((res)=>{
          this.material=res.data.result
        })
      }
    },
    mounted () {
       var id =this.$route.query.id;
       this.lookMaterial(id);
    }
  }


</script>

<style scoped>
  .text {
    font-size: 14px;
  }

  .item {
    margin-bottom: 18px;
  }

  .clearfix:before,
  .clearfix:after {
    display: table;
    content: "";
  }
  .clearfix:after {
    clear: both
  }

  .box-card {
    width: 1280px;
  }
</style>
